<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*匹配带有name属性的元素*/
        /*p[name]{*/
        /*    color:red;*/
        /*}*/

        /*p[name='p1']{*/
        /*    color:red;*/
        /*}*/

        /*p[name^='p']{*/
        /*    color:red;*/
        /*}*/

        /*p[name$='2']{*/
        /*    color:red;*/
        /*}*/

        p[name*='p']{
            color:red;
        }
        .c1{
            color:green;
        }
    </style>
</head>
<body>
<p name="p1">第1个段落</p>
<p name="p1">第2个段落</p>
<p name="p2">第3个段落</p>
<p name="ap2">第4个段落</p>
<p id="d1">第5个段落</p>
<div name="p1">第1个div</div>
<div name="p2">第2个div</div>
<div name="ap1">第3个div</div>
<div class="c1">
    <p>c1中第1个段落</p>
    <p>c1中第2个段落</p>
    <p>c1中第3个段落</p>
    <span>c1中第1个span</span><br>
    <span>c1中第2个span</span>
    <div class="c2">
        <p>c2中的段落</p>
        <p>c2中的段落</p>
        <p>c2中的段落</p>
    </div>
</div>
</body>
</html>